<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <ul>
      <li>第一个</li>
      <li>第二个</li>
      <li>第三个</li>
    </ul>
    <script>
      var lis = document.getElementsByTagName("li");
      // for(var i=0;i<lis.length;i++){
      //     lis[i].onclick = function(){
      //         console.log(i);
      //     }
      // }

      // console.log(i);

      // 1.第一种 ： 通过let 声明for循环；

      // for(let i=0;i<lis.length;i++){
      //     lis[i].onclick = function(){
      //         console.log(i);
      //     }
      // }

      // 2.第二种方式 ： 通过绑定元素对象
      // for(var i=0;i<lis.length;i++){
      //     lis[i].index = i;
      //     lis[i].onclick = function(){
      //         // console.log(i);
      //         // 获取到点击的对象，this 在事件里会指向事件源；
      //         console.log(this.index);
      //     }
      // }
      /* 
        var i=0;
        var i=1
        var i=2
        var i=3;
            var li1 = {
                index:0
            }
        
             var li2 = {
                index:1
            }

              var li3 = {
                index:2
            }
         */

      // 3.通过函数作用域 来保持i值；

      for (var i = 0; i < lis.length; i++) {
        (function (a) {
          lis[a].onclick = function () {
            console.log(a);
            // 获取到点击的对象，this 在事件里会指向事件源；
          };
        })(i);
      }

      // 定义一个函数；
      // var fn = function(){
      //     console.log("fn");
      // }
      // 调用一个函数；
      // fn();

      // 自执行函数，立刻执行函数 ；定义之后立刻调用；创建一个函数作用域出来；
      // (function(a){  // 形参
      //     console.log(a);
      // })(1) //实参
    </script>
  </body>
</html>
